import React, { useEffect } from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import { Layout, ConfigProvider, theme } from 'antd';
import { useAppSelector, useAppDispatch } from '../store';
import { selectTheme, selectSidebar, selectPageConfig } from '../store/slices/uiSlice';
import { selectIsAuthenticated } from '../store/slices/authSlice';

// 布局组件
import AppHeader from '../components/Layout/AppHeader';
import AppSidebar from '../components/Layout/AppSidebar';
import AppFooter from '../components/Layout/AppFooter';
import AppBreadcrumb from '../components/Layout/AppBreadcrumb';

const { Content } = Layout;

const MainLayout: React.FC = () => {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();

  const currentTheme = useAppSelector(selectTheme);
  const sidebar = useAppSelector(selectSidebar);
  const pageConfig = useAppSelector(selectPageConfig);
  const isAuthenticated = useAppSelector(selectIsAuthenticated);

  // 如果未认证，重定向到登录页
  useEffect(() => {
    if (!isAuthenticated) {
      navigate('/login', { replace: true });
    }
  }, [isAuthenticated, navigate]);

  // 主题配置 - 参考KOI-ADMIN风格
  const themeConfig = {
    algorithm: currentTheme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
    token: {
      colorPrimary: '#1890ff',
      borderRadius: 8,
      colorBgContainer: currentTheme === 'dark' ? '#141414' : '#ffffff',
      colorBgElevated: currentTheme === 'dark' ? '#1f1f1f' : '#ffffff',
      colorBgLayout: currentTheme === 'dark' ? '#000000' : '#f5f5f5',
      colorBorder: currentTheme === 'dark' ? '#303030' : '#d9d9d9',
      colorText: currentTheme === 'dark' ? '#ffffff' : '#000000',
      colorTextSecondary: currentTheme === 'dark' ? '#a6a6a6' : '#666666',
      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
      boxShadowSecondary: '0 4px 12px rgba(0, 0, 0, 0.15)',
    },
    components: {
      Card: {
        borderRadius: 12,
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
      },
      Button: {
        borderRadius: 6,
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
      },
      Layout: {
        headerBg: currentTheme === 'dark' ? '#001529' : '#ffffff',
        siderBg: currentTheme === 'dark' ? '#001529' : '#ffffff',
        bodyBg: currentTheme === 'dark' ? '#000000' : '#f5f5f5',
      },
    },
  };

  if (!isAuthenticated) {
    return null;
  }

  return (
    <ConfigProvider theme={themeConfig}>
      <Layout style={{ minHeight: '100vh' }}>
        {/* 侧边栏 */}
        {pageConfig.showSidebar && (
          <AppSidebar
            collapsed={sidebar.collapsed}
            width={sidebar.width}
            collapsedWidth={sidebar.collapsedWidth}
          />
        )}

        <Layout style={{
          minHeight: '100vh',
          background: currentTheme === 'dark' ? '#000000' : '#f5f5f5',
        }}>
          {/* 头部 */}
          {pageConfig.showHeader && <AppHeader />}

          {/* 面包屑 */}
          <AppBreadcrumb />

          {/* 主内容区 */}
          <Content
            style={{
              background: currentTheme === 'dark' ? '#000000' : '#f5f5f5',
              minHeight: pageConfig.showFooter
                ? 'calc(100vh - 64px - 48px - 70px)' // 减去头部、面包屑、底部的高度
                : 'calc(100vh - 64px - 48px)', // 减去头部、面包屑的高度
              overflow: 'auto',
            }}
          >
            <Outlet />
          </Content>

          {/* 底部 */}
          {pageConfig.showFooter && <AppFooter />}
        </Layout>
      </Layout>
    </ConfigProvider>
  );
};

export default MainLayout;
